<template>
    <div class='son-page'>
        <h3>我是子组件</h3>
        <p>父组件传给我的标题是:{{ title }}</p>
        <div class="top">
            <h4>这一块以下内容是插槽</h4>
            <slot>这是插槽默认的内容</slot>
        </div>
        <div class="mind">
            <h4>这是子组件内容区域</h4>
            <table style="width: 100%;">
                <tr>
                    <td>R:{{ r }}</td>
                    <td>G:{{ g }}</td>
                    <td>B:{{ b }}</td>
                </tr>
                <tr>
                    <td><button @click="r >= 255 || (r += 5)" style="background-color: red;">red++</button></td>
                    <td><button @click="g >= 255 || (g += 5)" style="background-color: green;">green++</button></td>
                    <td><button @click="b >= 255 || (b += 5)" style="background-color: blue;">blue++</button></td>
                </tr>
            </table>
        </div>
        <div class="bottom">
            <h4>这一块以下内容是作用域插槽改变文字颜色</h4>
            <slot name="bottom" :color="color">
                <p :style="{ color: color }">我这里没用插槽于是展示了默认值</p>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'son-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            r: 0,
            g: 0,
            b: 0,
        }
    },
    props: {
        title: {
            type: String,
            default: "父组件没有传标题"
        }
    },
    computed: {
        color() {
            return `rgb(${this.r},${this.g},${this.b})`
        }
    },
    watch: {
        color(val) {
            // console.log('癀极', val);
            this.$emit('changeColor', val);
        }
    }
}
</script>

<style scoped>
.son-page {
    padding: 20px;
    background-color: #999999;
    border: 1px solid #fff;
}

.top {
    background: #ffc0cb;
    padding: 10px;
}

.top h2 {
    font-weight: 600;
}

.mind {
    background: #daa520;
    padding: 10px;

}

.bottom {
    padding: 10px;
    background: #dcdcdc;
}
</style>